<template>
  <div class="order" style="height: 100%">
    <div class="pageTitleSubTitle">
      <div class="title">订单中心</div>
    </div>
    <Search :search="search" @searchVal="searchVal"/>
    <div class="storeContent" :style="'height: calc(100% - '+height+'px)'">
      <a-table :columns="columns" :data-source="columnsData" :pagination="false" :rowKey="(record,index) => index">
        <span slot="key" slot-scope="key,record" class="operation">
          <span v-if="configJurisdiction.order_info" :style="record.status == 2 || record.status == 5 || record.status == 6?'':'color:#ccc'" @click="openModal(record.id,record.status)">审核</span>
          <span v-if="configJurisdiction.check_order" @click="editColumns(record)">查看详情</span>
        </span>
      </a-table>
      <Pagination :current="page" :total="total" @pageSize="pageSize" />
    </div>
    <a-modal
      v-model="visible"
      title="审核"
      cancelText="关闭"
      okText="保存">
      <AppendStore v-if="visible" @sendData="getAppendData" ref="child" :appendData="configAppend" />
      <template slot="footer">
        <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
        <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import Pagination from '@/common/pagination/index'
  import Search from '@/common/search/index'
  import AppendStore from './modal'
  export default {
    name: 'order',
    components:{Pagination,Search,AppendStore},
    data () {
      return {
        tableLoading:false,
        height:190,
        statusId:0,
        visible:false,
        loading: false,
        configAppend:[
          {
            name:'审核状态',
            type:'select',
            val:'',
            must:true,
            place:'请选择状态',
            key:'status',
            selectData:[
              {id:1,name:'通过'},
              {id:2,name:'不通过'}
            ],
            nameKey:'name',
            idKey:'id'
          },
          {
            name:'说明',
            type:'input',
            val:'',
            must:false,
            place:'请输入说明',
            key:'remark'
          },
        ],
        columns:[
          { title: '序号', dataIndex: 'id', key: 'id'},
          { title: '订单编号', dataIndex: 'order_short_no', key: 'order_short_no'},
          { title: '会员名称', dataIndex: 'name', key: 'name'},
          { title: '手机号码', dataIndex: 'phone', key: 'phone'},
          { title: '所属门店', dataIndex: 'store_name', key: 'store_name'},
          { title: '订单状态', dataIndex: 'check_status_text', key: 'check_status_text'},
          { title: '实付金额', dataIndex: 'payment_amount', key: 'payment_amount'},
          { title: '预约时间', dataIndex: 'start_time', key: 'start_time'},
          { title: '开单时间', dataIndex: 'created_at', key: 'created_at'},
          { title: '预约备注', dataIndex: 'remark', key: 'remark'},
          { title: '操作', dataIndex: 'key', key: 'key', scopedSlots: { customRender: 'key' }},
        ],
        columnsData:[
          {a:1,b:2,c:3,d:'5',e:'3',f:'4',g:'2',h:'e',i:'s',j:'s',k:'s','l':'asd'}
        ],
        searchText:{},
        page:1,
        total:0,
        search:[
          {
            type:'input',
            name:'会员姓名',
            place:'请输入姓名',
            val:'',
            key:'customer_name',
          },
          {
            type:'input',
            name:'订单编号',
            place:'请输入编号',
            val:'',
            key:'order_short_no',
          },
          {
            type:'input',
            name:'手机号码',
            place:'请输入手机号',
            val:'',
            key:'customer_phone',
          },
          {
            type:'select',
            name:'所属门店',
            place:'请选择门店',
            val:'',
            key:'store_no',
            nameKey:'name',
            idKey:'store_no',
            selectData:[]
          },
          {
            type:'select',
            name:'订单状态',
            place:'请选择状态',
            val:'',
            key:'order_status',
            nameKey:'name',
            idKey:'id',
            selectData:[
              {id:7,name:'下单'},
              {id:1,name:'已取消'},
              {id:2,name:'支付成功'},
              {id:4,name:'订单关闭'},
              {id:5,name:'退款'},
              {id:6,name:'部分退款'},
            ]
          }
        ],
        jurisdiction:[
          { key:'admin-check-order', back:'check_order'},
          { key:'admin-order-info', back:'order_info'}
        ],
        configJurisdiction:{}
      }
    },
    created() {
      this.getList();
      this.getPermission();
      if(document.body.clientWidth>1800){
        this.height = 128
      }else{
        this.height = 190
      }
      this.configJurisdiction = this.getJurisdiction(1,this.jurisdiction);
    },
    methods:{
      openModal(item,type){
        if(type == 0 || type == 1 || type == 4) return;
        this.configAppend.forEach(item=>{
          item.val = ''
        });
        this.statusId = item;
        this.visible = true;
      },
      getAppendData(e){
        this.Api.orderStatus(e,this.statusId).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.visible = false;
          this.getList()
        })
      },
      modalChange(e){
        if(e === 1) return this.visible = false;
        this.$refs.child.sendData();
      },
      editColumns(record){
        this.$router.push({path:'/admin-order-info',query:{id:record.id}})
      },
      pageSize(e){
        this.page = e;
        this.getList()
      },
      searchVal(e){
        this.searchText = e;
        this.getList()
      },
      getList(){
        let data = this.searchText;
        data.page = this.page;
        data.size = 10;
        if(data.order_status === 7) data.order_status = 0;
        this.Api.orders(data).then(res=>{
          if(res.code !== 200) return;
          this.total = res.data.total;
          res.data.items.forEach(item=> {
            item.name = item.customer.name;
            item.phone = item.customer.phone;
            item.store_name = item.store?item.store.name:'--';
            item.start_time = item.reservation?item.reservation.start_time:'--';
            item.remark = item.reservation?item.reservation.remark:'--';
            // 0下单 1已取消 2支付成功 4订单关闭 5退款 6部分退款
            // item.check_status_text = item.check_status == 0 ? '未审核' : item.check_status == 1 ? '已审核' : '审核失败';
            item.check_status_text = item.status == 0 ? '下单' : item.status == 1 ? '已取消' :item.status == 2?'支付成功':item.status == 4?'订单关闭':item.status == 5?'退款':item.status == 6?'部分退款': '';

          });
          this.columnsData = res.data.items
        })
      },
      getPermission(){
        this.Api.permission().then(res=>{
          if(res.code !== 200) return;
          this.search.forEach(item=>{
            if(item.key === 'store_no') item.selectData = res.data;
          });
        })
      },
    }
  }
</script>
